@import './../../scss/conf.scss';
@import './../../scss/mixins/clearfix';

.biz-image-detail-title {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    margin-left: 20px;
}
.biz-image-detail-content-wrapper {
    padding: 20px 20px 0 20px;
    .biz-header-content {
        width: 100%;
        max-width: 100%;
        height: 219px;
        background:rgba(255,255,255,1);
        border-radius:2px;
        border:1px solid rgba(221,228,235,1);
        .left-wrapper {
            width: 200px;
            height:219px;
            border-right: 1px solid rgba(221,228,235,1);
            // padding-top: 30px;
            // padding-left: 50px;
            text-align: center;
            float: left;
            .logo {
                width: 100px;
                height: 100px;
                margin-top: 30px;
                margin-left: 50px;
                border-radius: 50%;
                border: 1px solid rgba(221,228,235,1);
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .left-content {
                padding-top: 12px;
                .image-name {
                    padding-bottom: 11px;
                    font-weight: bold;
                    color: #333C48;
                    font-size: 16px;
                }
                .download-count {
                    text-align: center;
                    font-size:12px;
                    font-family:MicrosoftYaHei;
                    color:rgba(115,121,135,1);
                }
            }
        }
        .right-wrapper {
            width: calc(100% - 200px);
            max-width: calc(100% - 200px);
            height: 219px;
            float: right;
            font-size: 14px;
            .top-content {
                width: 100%;
                height: 50%;
                padding-top: 27px;
                padding-left: 30px;
                border-bottom: 1px solid rgba(221,228,235,1);
                .updator {
                    float: left;
                    p:nth-child(1) {
                        color: #333C48;
                        padding-bottom: 14px;
                    }
                    p:nth-child(2) {
                        color: #737987;
                    }
                }
                .update-date {
                    float: left;
                    margin-left: 184px;
                    p:nth-child(1) {
                        color: #333C48;
                        padding-bottom: 14px;
                    }
                    p:nth-child(2) {
                        color: #737987;
                    }
                }
            }
            .bottom-content {
                width: 100%;
                height: 50%;
                padding-top: 27px;
                padding-left: 30px;
                p:nth-child(1) {
                    color: #333C48;
                    padding-bottom: 14px;
                }
                p:nth-child(2) {
                    color: #737987;
                }
            }
        }
    }
    .tag-count {
        margin-top: 20px;
        color: #737987;
        span {
            font-weight: bold;
            font-size: 16px;
            color: #333C48;
        }
    }
}
.biz-image-detail-table {
    border: 1px solid #e6e6e6;
    margin-top: 10px;
    p {
        margin: 0;
    }
    thead {
        tr {
            background: #fafbfd;
        }
    }
    tbody {
        border-top: 1px solid #e6e6e6;
        tr {
            background: #fff;
            &:hover {
                background-color: #fafbfd !important;
            }
            .art-tag {
                display: inline-block;
                width:72px;
                height:22px;
                line-height: 20px;
                border-radius:2px;
                width:72px;
                font-size:12px;
                font-family:MicrosoftYaHei;
                margin-right: 5px;
                text-align: center;
            }
            .dev-art {
                background:rgba(255,243,230,1);
                border:1px solid rgba(255,180,0,1);
                color:rgba(255,180,0,1);
            }
            .prod-art {
                background:rgba(236,255,243,1);
                border:1px solid rgba(48,216,120,1);
                color:rgba(48,216,120,1);
            }
            .handler-btn {
                margin-left: 20%;
                font-size: 12px;
                color: $primaryColor;
                cursor: pointer;
            }
            .tag-name-item {
                display: flex;
                align-items: center;
            }
            .copy-btn {
                display: inline-grid;
                margin-left: 8px;
                cursor: pointer;
                &:hover {
                    color: $primaryColor;;
                }
            }
        }
        .loading-row {
            width: 100%;
            height: 50px;
            border: 1px solid #e9edee;
            border-left: none;
            border-bottom: none;
            border-top: none;
            font-size: 14px;
            position: relative;
            .bk-loading-box .bk-loading-wrapper,
            .bk-loading .bk-loading-wrapper {
                top: 55%;
            }
        }
        .empty-row {
            position: relative;
            color: #737987;
            font-size: 12px;
            height: 40px;
            width: 100%;
            text-align: center;
            padding-top: 20px;
            border: none;
        }
    }
    .bk-message-box {
        min-height: 251px;
    }
}
